<template>
	<view>
		<scroll-view
			class="scroll"
			scroll-y="true"
			@scrolltolower="scrolltolower"
			refresher-enabled="true"
			:refresher-triggered="triggered"
			:refresher-threshold="100"
			refresher-background="#666"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
		>
			<!-- #ifdef H5 -->
			<uni-nav-bar left-icon="back" @clickLeft="back" :border="false" title="团队列表"></uni-nav-bar>
			<!-- #endif -->
			<view class="tab">
				<view class="tab_item" :class="tab_index == 1 ? 'tab_active' : ''" @click="tab_change_index" data-index="1">直推队员</view>
				<view class="tab_item" :class="tab_index == 2 ? 'tab_active' : ''" @click="tab_change_index" data-index="2">间推队员</view>
				<view class="tab_item" :class="tab_index == 3 ? 'tab_active' : ''" @click="tab_change_index" data-index="3">团队收益</view>
			</view>
			<view class="child" v-show="tab_index == 1">
				<view class="child_item" v-for="(item, index) in son_list" :key="index">
					<image class="child_item_avatar" :src="item.avatarUrl"></image>
					<view class="child_item_user">
						<view class="child_item_user_uid">UID: {{ item.id }}</view>
						<view class="child_item_user_nickName">昵称:{{ item.nickName }}</view>
					</view>
					<view class="child_item_time">加入:{{ item.create_time | formatTime }}</view>
				</view>
			</view>
			<view class="child" v-show="tab_index == 2">
				<view class="child_item" v-for="(item, index) in grandson_list" :key="index">
					<image class="child_item_avatar" :src="item.avatarUrl"></image>
					<view class="child_item_user">
						<view class="child_item_user_uid">UID: {{ item.id }}</view>
						<view class="child_item_user_nickName">昵称:{{ item.nickName }}</view>
					</view>
					<view class="child_item_time">加入:{{ item.create_time | formatTime }}</view>
				</view>
			</view>

			<view class="order" v-show="tab_index == 3">
				<view class="order_item" v-for="(item, index) in income_list" :key="index">
					<view class="order_item_head">
						<view class="order_item_oid">下单:{{ item.updated_time | formatTime }}</view>
						<view class="order_item_time">{{ item.time }}</view>
					</view>
					<view class="order_item_user">
						<view class="order_item_user_info">
							<view>UID:{{ item.id }}</view>
							<view>昵称:{{ item.nickName }}</view>
						</view>
						<view class="order_item_user_money">
							<view class="order_item_user_money_row">
								<text class="order_item_user_money_text">订单</text>
								<text class="order_item_user_money_money">￥{{ item.money / 100 }}</text>
							</view>
							<view class="order_item_user_money_row">
								<text class="order_item_user_money_text">收益</text>
								<text class="order_item_user_money_money">￥{{ item.income_money }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 结果为空 -->
		<view class="empty" v-show="is_empty">
			<image src="../../static/empty.png" class="empty_img"></image>
			<view class="empty_text">抱歉啦,没有找到~</view>
		</view>
	</view>
</template>

<script>
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			is_empty: 0,
			tab_index: 1,
			son_page: 1,
			son_page_last: 1,
			son_list: [],
			grandson_page: 1,
			grandson_page_last: 1,
			grandson_list: [],
			income_list: [],
			income_page: 1,
			income_page_last: 1,
			// 刷新状态
			triggered: true,
			_freshing: false
		};
	},
	async onLoad() {
		uni.showLoading();
		await this.team_1();
		await this.team_2();
		this.team_3();
	},
	filters: {
		formatTime(timestamp) {
			var date = new Date(timestamp * 1000); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m;
		}
	},
	methods: {
		// 下拉刷新
		async onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			uni.showLoading();
			let res = {};
			switch (parseInt(this.tab_index)) {
				case 1:
					res = await Route.user_team_1({
						page: 1,
						uid: uni.getStorageSync('userInfo').uid
					});
					this.son_list = res.list;
					this.son_page_last = res.lastpage;
					this.son_page = 1;
					uni.hideLoading();
					break;
				case 2:
					this.grandson_page = 1;
					res = await Route.user_team_2({
						page: 1,
						uid: uni.getStorageSync('userInfo').uid
					});
					this.grandson_list = res.list;
					this.grandson_page_last = res.lastpage;
					uni.hideLoading();
					break;
				case 3:
					this.income_page = 1;
					res = await Route.user_team_3({
						page: 1,
						uid: uni.getStorageSync('userInfo').uid
					});
					this.income_list = res.list;
					uni.hideLoading();
					break;
			}
			this.triggered = false;
			this._freshing = false;
		},
		onRestore() {
			this.triggered = 'restore'; // 需要重置
		},
		// 返回
		back() {
			uni.navigateBack();
		},
		async team_1(page = 1) {
			let res = await Route.user_team_1({
				page: page,
				uid: uni.getStorageSync('userInfo').uid
			});
			this.son_list = this.son_list.concat(res.list);
			this.son_page_last = res.lastpage;
			uni.hideLoading();
		},
		async team_2(page = 1) {
			let res = await Route.user_team_2({
				page: page,
				uid: uni.getStorageSync('userInfo').uid
			});
			this.grandson_list = this.grandson_list.concat(res.list);
			this.grandson_page_last = res.lastpage;
			uni.hideLoading();
		},
		async team_3(page = 1) {
			let res = await Route.user_team_3({
				page: page,
				uid: uni.getStorageSync('userInfo').uid
			});
			this.income_list = this.income_list.concat(res.list);
			uni.hideLoading();
		},
		// 选项卡
		async tab_change_index(e) {
			this.tab_index = e.currentTarget.dataset.index;
			switch (this.tab_index) {
				case '1':
					if (this.son_list.length <= 0) {
						this.is_empty = 1;
					} else {
						this.is_empty = 0;
					}
					break;
				case '2':
					if (this.grandson_list.length <= 0) {
						this.is_empty = 1;
					} else {
						this.is_empty = 0;
					}
					break;
				case '3':
					if (this.income_list.length <= 0) {
						this.is_empty = 1;
					} else {
						this.is_empty = 0;
					}
					break;
			}
		},
		// 列表-触底
		async scrolltolower() {
			uni.showLoading();
			switch (parseInt(this.tab_index)) {
				case 1:
					if (this.son_page >= this.son_page_last) {
						return uni.showToast({
							icon: 'none',
							title: '没有更多啦'
						});
					}
					this.son_page += 1;
					this.team_1(this.son_page);
					uni.hideLoading()();
					break;
				case 2:
					if (this.grandson_page >= this.grandson_page_last) {
						return uni.showToast({
							icon: 'none',
							title: '没有更多啦'
						});
					}
					this.grandson_page += 1;
					this.team_2(this.grandson_page);
					uni.hideLoading();
					break;
				case 3:
					this.income_page += 1;
					let res = await Route.user_team_3({
						page: this.income_page,
						uid: uni.getStorageSync('userInfo').uid
					});
					if (res.list.length == 0) {
						return uni.showToast({
							icon: 'none',
							title: '没有更多啦'
						});
					}
					this.income_list = this.income_list.concat(res.list);
					uni.hideLoading();
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.scroll {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

// 选项卡
.tab {
	display: flex;
	width: 100%;
	height: 88rpx;
	justify-content: space-around;
	align-items: center;
	border-bottom: 1rpx solid $template-line;

	&_item {
		font-size: $uni-font-size-lg;
		position: relative;
		color: $uni-text-color-grey;
	}

	&_active {
		color: $template-background;
	}

	&_active:after {
		//伪元素实现第二层
		content: ' ';
		position: absolute;
		left: 0;
		bottom: -9px;
		width: 100%;
		height: 6rpx;
		background: $template-background;
		border-radius: $uni-border-radius-lg;
	}
}

// 队员列表
.child {
	display: flex;
	flex-direction: column;
	align-items: center;

	&_item {
		position: relative;
		width: 690rpx;
		padding: 33rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid $template-line;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;

		&_avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		&_user {
			display: flex;
			flex-direction: column;
			width: 266rpx;

			&_uid {
			}

			&_nickName {
			}
		}
	}
}

// 订单收益列表
.order {
	display: flex;
	flex-direction: column;
	align-items: center;

	&_item {
		width: 690rpx;
		padding: 33rpx 0;
		display: flex;
		flex-direction: column;
		border-bottom: 1rpx solid $template-line;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;

		&_head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		&_oid {
			width: 333rpx;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		&_user {
			margin-top: 8rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&_info {
				display: flex;
				flex-direction: column;
			}

			&_money {
				display: flex;
				flex-direction: column;
				&_row {
					display: flex;
					align-items: center;
				}
				&_text {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}
				&_money {
					font-size: $uni-font-size-lg;
					color: red;
					font-weight: 900;
				}
			}
		}
	}
}

// 空列表
.empty {
	position: fixed;
	top: 88rpx;
	left: 0;
	z-index: 9;
	background: #fff;
	width: 100vw;
	height: calc(100vh - 88rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	&_img {
		width: 386rpx;
		height: 282rpx;
	}

	&_text {
		margin-top: 8rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
}
</style>
